<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>广告位管理</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="show = true">新增广告位</el-button>
    </div>

    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="title" label="图片" width="150" />
      <el-table-column prop="title" label="标题" />
      <el-table-column
        label="操作"
        align="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <adDraw :show="show" @changeShow="changeShow" />

  </el-card>
</template>

<script>
import adDraw from './compoent/adDraw.vue'

export default {
  components: {
    adDraw
  },
  data() {
    return {

      show: false,

      tableData: [
        {
          title: '王小虎'
        }, {
          title: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: []
    }
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    changeShow(payload) {
      this.show = payload
    }
  }
}
</script>

<style scoped>

</style>
